<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>医疗辅助评价系统</title>
    <link rel="stylesheet" href="js/element-plus/index.css" />
    <!-- 引入 vxe-table 样式 -->
    <link rel="stylesheet" href="js/vxe-table/style.min.css" />
    <link rel="stylesheet" href="style/index.css" />
  </head>
  <body>
    <div id="app" v-cloak>
      <el-container class="container">
        <el-aside :width="isCollapse ? '60px' : '200px'" class="layout-side">
          <h2 class="logo">{{isCollapse ? '评价' : '医疗辅助评价系统'}}</h2>
          <el-scrollbar>
            <el-menu
              background-color="var(--system-menu-background)"
              text-color="var(--system-menu-text-color)"
              active-text-color="var(--system-primary-color)"
              :collapse-transition="false"
              :collapse="isCollapse"
              :default-active="activeMenu"
              @select="onMenuItemClick"
            >
              <menu-item v-for="menu in menus" :key="menu.text" :menu="menu"></menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-container>
          <el-header class="layout-header">
            <div class="layout-header-top">
              <div class="collapse-icon" @click="menuCollapseToggle">
                <i class="el-icon-s-unfold" v-if="isCollapse"></i>
                <i class="el-icon-s-fold" v-else></i>
              </div>
              <div class="nav-login-user">
                <!-- <el-popover title="标题" :width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                  <template #reference>
                    <el-button>hover 激活</el-button>
                  </template>
                </el-popover> -->
                <el-popover placement="bottom" :width="320" trigger="hover">
                  <template #reference>
                    <div class="bell-icon-box">
                      <span class="el-icon-bell"></span>
                    </div>
                  </template>
                  <div class="message-box">
                    <h2 class="message-title">
                      <span>公告通知</span>
                      <span class="el-icon el-icon-refresh-right" @click="loadNotices"></span>
                    </h2>
                    <div class="message-body">
                      <div class="message-item" v-for="(item, index) in notices" :key="item.NoticeID">
                        <div class="tit"><el-tag effect="dark" size="small">{{index + 1}}</el-tag>{{item.Title}}</div>
                        <div class="content">{{item.NoticeContent}}</div>
                        <div class="message-footer">
                          <div class="foot-item"><i class="el-icon-user"></i>{{item.Promulgator}}</div>
                          <div class="foot-item"><i class="el-icon-date"></i>{{item.PubTime}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-popover>
                <el-avatar :size="40" src="images/avatar-default.jpg"></el-avatar>
                <el-dropdown size="medium">
                  <span class="el-dropdown-link">超级管理员<i class="el-icon-arrow-down el-icon--right"></i></span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </el-header>

          <el-main class="layout-main">
            <div class="layout-main-inner">
              <router-view v-slot="{ Component, route }">
                <keep-alive>
                  <component :is="Component" />
                </keep-alive>
              </router-view>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
    <script src="js/vue.global.js"></script>
    <script src="js/vue-router.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/element-plus/index.full.js"></script>
    <script src="js/element-plus/locale/zh-cn.js"></script>
    <!-- 引入 vxe-table 脚本 -->
    <script src="js/vxe-table/xe-utils.umd.min.js"></script>
    <script src="js/vxe-table/index.umd.min.js"></script>
    <!-- 加载页面组件 -->
    <script src="js/realtime-component.js"></script>
    <script src="js/history-component.js"></script>
    <script src="js/comment-dialog.js"></script>
    <script>
      const useMenuEffect = () => {
        const { ref, watchEffect } = Vue
        const { useRouter, useRoute } = VueRouter
        const [router, route] = [useRouter(), useRoute()]
        let menus = [
          { id: 'realtime', text: '实时导入', iconClass: 'el-icon-thumb' },
          { id: 'history', text: '历史点评', iconClass: 'el-icon-document' }
        ]
        const activeMenu = ref('realtime') // 默认激活的菜单项id

        const onMenuItemClick = (key, keyPath) => {
          router.push({ name: key })
        }

        watchEffect(() => {
          activeMenu.value = route.name
        })

        return {
          menus: ref(menus),
          activeMenu,
          onMenuItemClick
        }
      }

      const useMenuToggleEffect = () => {
        const { ref } = Vue
        const isCollapse = ref(false)
        const menuCollapseToggle = () => {
          isCollapse.value = !isCollapse.value
        }
        return {
          isCollapse,
          menuCollapseToggle
        }
      }

      const routes = [
        // 定义路由
        { path: '/', name: 'realtime', component: RealtimeComponent },
        { path: '/history', name: 'history', component: HistoryComponent }
      ]
      const router = VueRouter.createRouter({
        // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
        history: VueRouter.createWebHashHistory(),
        routes // `routes: routes` 的缩写
      })

      const app = Vue.createApp({
        // 创建vue应用
        setup() {
          const { ref } = Vue
          const { ElMessage } = ElementPlus
          const { menus, activeMenu, onMenuItemClick } = useMenuEffect() // 菜单数据
          const { isCollapse, menuCollapseToggle } = useMenuToggleEffect() // 左侧菜单的展开和收缩

          const notices = ref([
            {
              Title: '这是一条测试消息',
              NoticeContent:
                'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto incidunt optio nihil vero quaerat odit ipsum consequatur est corporis debitis.',
              Promulgator: '寒江雪',
              PubTime: '2021-09-17'
            }
          ]) // 通知消息
          const loadNotices = () => {
            console.log('重新加载通知消息')
          }
          const logout = () => {
            ElMessage('别点了，这个功能没有开发')
          }

          return {
            menus,
            activeMenu,
            onMenuItemClick,
            isCollapse,
            menuCollapseToggle,
            notices,
            loadNotices,
            logout
          }
        }
      })
      app.use(router)
      app.use(ElementPlus, { size: 'small', locale: ElementPlus.lang.zhCn })
      app.use(VXETable, { size: 'small' })
      app.component('comment-dialog', CommentDialog)
      app.component('menu-item', {
        // 菜单项组件
        name: 'menuItem',
        template: `
          <el-sub-menu v-if="menu.children && menu.children.length" :index="menu.id">
            <template #title>
              <i v-if="menu.iconClass" :class="menu.iconClass"></i>
              <span>{{menu.text}}</span>
            </template>
            <menu-item v-for="item in menu.children" :key="item.text" :menu="item"></menu-item>
          </el-sub-menu>
          <el-menu-item v-else :index="menu.id">
            <i v-if="menu.iconClass" :class="menu.iconClass"></i>
            <template #title>              
              <span>{{menu.text}}</span>
            </template>
          </el-menu-item>
        `,
        props: {
          menu: {
            type: Object,
            default: () => ({})
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
